<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
        <title>Split Feature Example</title>
        
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
        <style>
            /* avoid pink tiles */
            .olImageLoadError {
                background-color: transparent !important;
            }
        </style>
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
            var map, vectors, split;
            function init(){
                map = new OpenLayers.Map('map');

                // give the features some style
                var styles = new OpenLayers.StyleMap({
                    "default": {
                        strokeWidth: 2
                    },
                    "select": {
                        strokeColor: "#0099cc",
                        strokeWidth: 4
                    }
                });
            
                // add rules from the above lookup table
                styles.addUniqueValueRules("default", "RP_TYPE", {
                    10: {strokeColor: "#000000", strokeWidth: 2},
                    12: {strokeColor: "#222222", strokeWidth: 2},
                    14: {strokeColor: "#444444", strokeWidth: 2},
                    16: {strokeColor: "#666666", strokeWidth: 2},
                    18: {strokeColor: "#888888", strokeWidth: 2},
                    19: {strokeColor: "#666666", strokeWidth: 1}
                });

                vectors = new OpenLayers.Layer.Vector("Lines", {
                    isBaseLayer: true,
                    strategies: [new OpenLayers.Strategy.Fixed()],                
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "data/roads.json",
                        format: new OpenLayers.Format.GeoJSON()
                    }),
                    styleMap: styles,
                    maxExtent: new OpenLayers.Bounds(
                        1549471.9221, 6403610.94, 1550001.32545, 6404015.8
                    )
                });
            



                map.addLayer(vectors);

                map.addControl(new OpenLayers.Control.MousePosition());

                var split = new OpenLayers.Control.Split({
                    layer: vectors,
                    eventListeners: {
                        aftersplit: function(event) {
                            flashFeatures(event.features);
                        }
                    }
                });
                map.addControl(split);

                map.zoomToMaxExtent();

                split.activate();
            }
            
            function flashFeatures(features, index) {
                if(!index) {
                    index = 0;
                }
                var current = features[index];
                if(current && current.layer === vectors) {
                    vectors.drawFeature(features[index], "select");
                }
                var prev = features[index-1];
                if(prev && prev.layer === vectors) {
                    vectors.drawFeature(prev, "default");
                }
                ++index;
                if(index <= features.length) {
                    window.setTimeout(function() {flashFeatures(features, index)}, 100);
                }
            }

        </script>
    </head>
    <body onload="init()">
        <h1 id="title">OpenLayers Split Feature Example</h1>
        <div id="tags">
            vector, feature, splitting, split, stylemap
        </div>          
        <p id="shortdesc">
            Demonstrates splitting of line features.
        </p>
        <div id="map" class="smallmap"></div>    
        <div id="docs">
            <p>The split control can be configured to listen for edits on any vector layer
            or it can allow for creation of temporary sketch features.  Modified or
            newly drawn features will be used to split existing features on any target
            layer.  This example shows the split control configured to use temporary
            sketches for the split.</p>
        </div>
    </body>
</html>
